<template>
	<div class="cart">
		<h4>全部商品</h4>
		<div class="cart-main">
			<div class="cart-th">
				<div class="cart-th1">全部</div>
				<div class="cart-th2">商品</div>
				<div class="cart-th3">单价（元）</div>
				<div class="cart-th4">数量</div>
				<div class="cart-th5">小计（元）</div>
				<div class="cart-th6">操作</div>
			</div>
			<div class="cart-body">
				<ul class="cart-list" v-for="item in cartInfoList" :key="item.id">
					<li class="cart-list-con1">
						<input
							type="checkbox"
							name="chk_list"
							:checked="item.isChecked === 1"
							@click="checkedStatus($event, item.skuId)"
						/>
					</li>
					<li class="cart-list-con2">
						<img :src="item.imgUrl" />
						<div class="item-msg">{{ item.skuName }}</div>
					</li>
					<li class="cart-list-con3">
						<div class="item-txt">{{ item.sourceType }}</div>
					</li>
					<li class="cart-list-con4">
						<span class="price">{{ item.skuPrice }}</span>
					</li>
					<li class="cart-list-con5">
						<a
							href="javascript:void(0)"
							class="mins"
							@click="changeSkuNum(item.skuNum, item.skuId, -1)"
							>-</a
						>
						<input
							autocomplete="off"
							type="text"
							:value="item.skuNum"
							minnum="1"
							class="itxt"
							readonly="readonly"
						/>
						<a
							href="javascript:void(0)"
							class="plus"
							@click="changeSkuNum(item.skuNum, item.skuId, 1)"
							>+</a
						>
					</li>
					<li class="cart-list-con6">
						<span class="sum">{{ item.skuNum * item.skuPrice }}</span>
					</li>
					<li class="cart-list-con7">
						<a href="javascript:;" class="sindelet" @click="removeCartDataList(item.skuId)">删除</a>
						<br />
						<a href="javascript:;">移到收藏</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="cart-tool">
			<div class="select-all">
				<input
					class="chooseAll"
					type="checkbox"
					:checked="isAllChecked"
					@click="SelectAllChecked($event)"
				/>
				<span>全选</span>
			</div>
			<div class="option">
				<a href="javascript:;" @click="removeSelected">删除选中的商品</a>
				<a href="javascript:;">移到我的关注</a>
				<a href="javascript:;">清除下柜商品</a>
			</div>
			<div class="money-box">
				<div class="chosed">
					已选择 <span>{{ judgmentChecked }}</span
					>件商品
				</div>
				<div class="sumprice">
					<em>总价（不含运费） ：</em>
					<i class="summoney">{{ cartPrice }}</i>
				</div>
				<div class="sumbtn">
					<router-link to="/trade">结算</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import throttle from 'lodash/throttle';
import { mapGetters } from 'vuex';
export default {
	name: 'ShoppingCart',
	computed: {
		...mapGetters('cart', ['cartDataList']),
		// 购物车数据
		cartInfoList() {
			return this.cartDataList.cartInfoList || [];
		},
		// 商品总价
		cartPrice() {
			// 初始化
			let price = 0;
			this.cartInfoList.forEach(e => {
				if (e.isChecked === 1) {
					// 商品总价=商品单价 * 商品总数
					price += e.skuNum * e.skuPrice;
				}
			});
			return price;
		},
		// 判断底部复选框是否全部选中
		isAllChecked() {
			// 判断 isChecked 属性是否值为1
			return this.cartInfoList.every(e => e.isChecked === 1);
		},
		// 判断选中几个商品
		judgmentChecked() {
			// 初始化商数量
			let num = 0;
			this.cartInfoList.forEach(element => {
				if (element.isChecked === 1) {
					num += element.skuNum;
				}
			});
			return num;
		},
	},
	methods: {
		// 派发actions请求
		getCartDataList() {
			this.$store.dispatch('cart/getCartDataList');
		},
		// 增加or减少商品数量
		// 节流 防止用户频繁点击
		changeSkuNum: throttle(async function (minNum, id, num) {
			// 判断商品最小值
			if (num === -1) {
				if (minNum === 1) {
					return;
				}
			}
			// 判断返回Promise成功or失败
			try {
				await this.$store.dispatch('detail/addCart', { skuId: id, skuNum: num });
				this.getCartDataList();
				this.$message({
					message: `商品数量已修改`,
					type: 'success',
				});
			} catch (error) {
				this.$message({
					message: '操作失败,请重试',
					type: 'error',
				});
			}
		}, 1000),
		// 删除购物车商品
		removeCartDataList(skuId) {
			// 弹窗提示是否确定删除
			this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					// 确认删除接收promise状态
					try {
						await this.$store.dispatch('cart/removeCartList', skuId);
						this.getCartDataList();
						this.$message({
							type: 'success',
							message: '删除商品成功!',
						});
					} catch (error) {
						this.$message({
							message: '删除商品失败！',
							type: 'error',
						});
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		// 切换商品选中状态
		async checkedStatus(e, skuId) {
			try {
				let isChecked = e.target.checked ? 1 : 0;
				await this.$store.dispatch('cart/upDataChecked', { skuId, isChecked });
				// 重新派发请求获取最新数据
				this.getCartDataList();
				this.$message({
					message: '切换商品状态成功',
					type: 'success',
				});
			} catch (error) {
				this.$message({
					message: '切换商品状态失败，请重试！',
					type: 'error',
				});
			}
		},
		// 全选按钮
		async SelectAllChecked(e) {
			try {
				let isChecked = e.target.checked ? 1 : 0;
				for (let i = 0; i < this.cartInfoList.length; i++) {
					await this.$store.dispatch('cart/upDataChecked', {
						skuId: this.cartInfoList[i].skuId,
						isChecked,
					});
				}
				// 重新派发请求获取最新数据
				this.getCartDataList();
				this.$message({
					message: '切换商品状态成功',
					type: 'success',
				});
			} catch (error) {
				this.$message({
					message: '切换商品状态失败，请重试！',
					type: 'error',
				});
			}
		},
		// 删除选中商品
		removeSelected() {
			this.$confirm('此操作将永久删除所有商品, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					try {
						for (let i = 0; i < this.cartInfoList.length; i++) {
							if (this.cartInfoList[i].isChecked === 1) {
								await this.$store.dispatch('cart/removeCartList', this.cartInfoList[i].skuId);
							}
						}
						this.getCartDataList();
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
					} catch (error) {
						this.$message({
							message: '删除商品失败！',
							type: 'error',
						});
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
	},
	mounted() {
		// 组件挂载完毕派发actions请求
		this.getCartDataList();
	},
};
</script>

<style scoped>
.cart {
	width: 1200px;
	margin: 0 auto;
}
.cart h4 {
	margin: 9px 0;
	font-size: 14px;
	line-height: 21px;
}
.cart .cart-main .cart-th {
	background: #f5f5f5;
	border: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}
.cart .cart-main .cart-th > div {
	float: left;
}
.cart .cart-main .cart-th .cart-th1 {
	width: 25%;
}
.cart .cart-main .cart-th .cart-th1 input {
	vertical-align: middle;
}
.cart .cart-main .cart-th .cart-th1 span {
	vertical-align: middle;
}
.cart .cart-main .cart-th .cart-th2 {
	width: 25%;
}
.cart .cart-main .cart-th .cart-th3,
.cart .cart-main .cart-th .cart-th4,
.cart .cart-main .cart-th .cart-th5,
.cart .cart-main .cart-th .cart-th6 {
	width: 12.5%;
}
.cart .cart-main .cart-body {
	margin: 15px 0;
	border: 1px solid #ddd;
}
.cart .cart-main .cart-body .cart-list {
	padding: 10px;
	border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.cart .cart-main .cart-body .cart-list:last-child {
	border-bottom: none;
}
.cart .cart-main .cart-body .cart-list > li {
	float: left;
}
.cart .cart-main .cart-body .cart-list .cart-list-con1 {
	width: 4.1667%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con2 {
	width: 25%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con2 img {
	width: 82px;
	height: 82px;
	float: left;
}
.cart .cart-main .cart-body .cart-list .cart-list-con2 .item-msg {
	float: left;
	width: 150px;
	margin: 0 10px;
	line-height: 18px;
}
.cart .cart-main .cart-body .cart-list .cart-list-con3 {
	width: 20.8333%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con3 .item-txt {
	text-align: center;
}
.cart .cart-main .cart-body .cart-list .cart-list-con4 {
	width: 12.5%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con5 {
	width: 12.5%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con5 .mins {
	border: 1px solid #ddd;
	border-right: 0;
	float: left;
	color: #666;
	width: 6px;
	text-align: center;
	padding: 8px;
}
.cart .cart-main .cart-body .cart-list .cart-list-con5 input {
	border: 1px solid #ddd;
	width: 40px;
	height: 33px;
	float: left;
	text-align: center;
	font-size: 14px;
}
.cart .cart-main .cart-body .cart-list .cart-list-con5 .plus {
	border: 1px solid #ddd;
	border-left: 0;
	float: left;
	color: #666;
	width: 6px;
	text-align: center;
	padding: 8px;
}
.cart .cart-main .cart-body .cart-list .cart-list-con6 {
	width: 12.5%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con6 .sum {
	font-size: 16px;
}
.cart .cart-main .cart-body .cart-list .cart-list-con7 {
	width: 12.5%;
}
.cart .cart-main .cart-body .cart-list .cart-list-con7 a {
	color: #666;
}
.cart .cart-tool {
	overflow: hidden;
	border: 1px solid #ddd;
}
.cart .cart-tool .select-all {
	padding: 10px;
	overflow: hidden;
	float: left;
}
.cart .cart-tool .select-all span {
	vertical-align: middle;
}
.cart .cart-tool .select-all input {
	vertical-align: middle;
}
.cart .cart-tool .option {
	padding: 10px;
	overflow: hidden;
	float: left;
}
.cart .cart-tool .option a {
	float: left;
	padding: 0 10px;
	color: #666;
}
.cart .cart-tool .money-box {
	float: right;
}
.cart .cart-tool .money-box .chosed {
	line-height: 26px;
	float: left;
	padding: 0 10px;
}
.cart .cart-tool .money-box .sumprice {
	width: 200px;
	line-height: 22px;
	float: left;
	padding: 0 10px;
}
.cart .cart-tool .money-box .sumprice .summoney {
	color: #c81623;
	font-size: 16px;
}
.cart .cart-tool .money-box .sumbtn {
	float: right;
}
.cart .cart-tool .money-box .sumbtn a {
	display: block;
	position: relative;
	width: 96px;
	height: 52px;
	line-height: 52px;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-family: 'Microsoft YaHei';
	background: #e1251b;
	overflow: hidden;
}
</style>
